<template>
  <el-container>
    <!-- <el-header>Header</el-header> -->
    <el-main>
      <div>

        <div class="loginform" style="opacity: 0.90;  /*设置透明度*/">
          <div>
            <div class="my-element" alt="Resized Image"></div>
          </div>
          <div class="center-text">小型超市后台管理系统</div>
          <div class="center-text-under">Supermarket management system</div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input style="font-size: 16px;" v-model.number="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input style="font-size: 16px;" type="password" v-model="ruleForm.password"
                autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%; margin-bottom: 5%;font-size: 16px;" type="primary"
                @click="submitForm()">登录</el-button>
              <br>
              <el-button style="width: 100%;font-size: 16px;" @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';
export default {
  data() {

    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      empId: "",
      cusId: "",
      username: "",
      password: "",
      ruleForm: {
        password: "",
        username: "",
      },
      checkForm: {
        empId: "",
        cusId: "",
        password: "",
        username: "",
      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: checkUsername, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.checkData();
    },
    resetForm() {
      this.ruleForm.password = "";
      this.ruleForm.username = "";
    },
    checkin() {
      if (this.checkForm != null) {
        this.setlocalStore();
        this.$router.push('/salemenu');
      }
      else if (this.checkForm == null) {
        alert("您的账号或密码错误！")
      }
      else {
        alert("您的账号存在异常，请及时联系经理进行处理！")
      }
    },
    checkData() {
      const url = "http://localhost:8080/login";
      axios.post(url, this.ruleForm)
        .then((response) => {
          console.log(response.data);
          this.checkForm = response.data.data;
          this.checkin();
        })
        .catch((error) => {
          console.error('Error in checkData request', error);

        });
    },
    setlocalStore() {
      localStorage.setItem('empId', this.checkForm.empId);
      localStorage.setItem('cusId', this.checkForm.cusId);
      localStorage.setItem('username', this.checkForm.username);
      localStorage.setItem('password', this.checkForm.password);
    },
    init() {
      this.empId = localStorage.getItem('empId');
      this.cusId = localStorage.getItem('cusId');
      this.username = localStorage.getItem('username') || "";
      this.password = localStorage.getItem('password') || "";
      this.ruleForm.username = this.username;
      this.ruleForm.password = this.password;
    },

  },
  mounted() {
    this.init();
  },
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.center-text {
  margin-left: 8vh;
  font-size: 26px;
  line-height: 30px;
  color: #333;
}
.my-element {
  background-image: url('../img/log.png'); /* 设置背景图片 */
  width: 200px; /* 可根据需要调整元素大小 */
  height: 187px;
  margin-left: 20vh;
}
.center-text-under {
  margin-left: 8vh;
  font-size: 20px;
  line-height: 60px;
  color: #333;
}

.el-main {
  background: url("../assets/img/登录.png");
  background-size: 100%;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body {
  margin: 0;
}

.el-container {
  padding: 0;
  margin: 0;
  height: 100vh;
}

body>.el-container {
  margin-bottom: 40px;
  /* height: 100vh; */
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.loginform {
  position: relative;
  z-index: 999;
  background-color:#aebbc5;
  width: 400px;
  padding-left: 40px;
  padding-right: 80px;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-left: 33%;
  margin-top: 1%;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  /* filter: blur(1px);  设置高斯模糊 */
  /* opacity: 0.9;  设置透明度 */
}

.all {
  line-height: 60px;
}</style>